<template>
    <div class="container-xy">
        <Row type="flex" :gutter="40">
            <Col :span="8">
                <gridContent>
                    <Divider slot="title">使用默认数字渲染</Divider>
                    <num-transform size="small" :isAuto="true" :splitLen="3"></num-transform>
                </gridContent>
            </Col>
            <Col :span="8">
                <gridContent>
                    <Divider slot="title">整数渲染</Divider>
                    <num-transform slot="content" size="middle" :number="number1" :splitLen="2"></num-transform>
                </gridContent>
            </Col>
            <Col :span="8">
                <gridContent>
                    <Divider slot="title">小数点渲染</Divider>
                    <num-transform slot="content" :number="number2" :splitLen="3"></num-transform>
                </gridContent>
            </Col>
        </Row>
    </div>
</template>
<script>
export default {
    name: "num",
    components: {
    },
    data() {
        return {
            number1: 900,
            number2: 1060.1,
        };
    },
    mounted() {
        this.timer = setInterval(() => {
            this.number1 =
                Number(this.number1) + Number(this.getRandomNumber(1, 100));
            this.number2 =
                Number(this.number2) + Number(this.getRandomNumber(1, 20));
        }, 3000);
    },
    methods: {
        getRandomNumber(min, max) {
            return Math.floor(Math.random() * (max - min + 1) + min);
        },
    },
    beforeDestroy() {
        clearInterval(this.timer);
    },
};
</script>